<template>
<div>
  <el-empty
    v-if="versionList.length==0"
    description="暂无历史版本">
  </el-empty>

  <el-row :gutter="20">
    <!--左側-->

    <el-col :span="6">
      <div  style="max-height:800px;overflow-y:auto;padding-right: 10px">
      <el-timeline  class="box-card card-body">
        <el-timeline-item
          v-for="(histVer, index) in versionList"
          :timestamp="histVer.version | vers"
          placement="top">
          <el-card>
            <p>分类名称:{{histVer.claificaName}}</p>
            <h4 v-if="histVer.updateRecords!=null&&histVer.updateRecords!=''">更新日志</h4>
            <p>{{histVer.updateRecords}}</p>
            <el-link
              :underline="false"
              type="primary"
              @click="bodyContent(histVer)"
            >详情>>
            </el-link>
            <p>{{histVer.createBy}} 更新于 {{histVer.updateTime}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      </div>
      <!--<div v-for="(histVer, index) in versionList">
        <el-card class="box-card card-body">
          <div slot="header" class="clearfix">
            <span>历史版本:{{histVer.version}}</span>
          </div>
          <div class="text">
            <p>维护人:{{histVer.createBy}}</p>
            <p>更新时间:{{histVer.updateTime}}</p>
            <p>更新日志:</p>
            <p>{{histVer.updateRecords}}</p>
            <el-link
              :underline="false"
              type="primary"
              @click="bodyContent(histVer)"
            >详情>>
            </el-link>
          </div>
        </el-card>
      </div>-->
    </el-col>

    <!--右侧-->
    <el-col :span="18">
      <div v-if="versionList.length!=0">
        <el-card class="card-body right-card">
          <h1 class="title">{{title}}</h1>
          <el-divider></el-divider>
          <div class="ql-editor"  v-html="contents">
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
</div>
</template>

<script>
  import {getVersion} from '@/api/knowledge/content'

  export default {
    name: "historVers",
    data() {
      return {
        versionList: [],
        display:false,
        title:'',
        contents:''
      }
    },
    methods: {
      getHistoryVer(id) {
        getVersion(id).then(response => {
          this.versionList = response.data;
          if(this.versionList.length>0){
            this.bodyContent(this.versionList[0]);
          }
        })
      },
      viewContent(scope){
        this.display=true
      },
      handelCancel(){
        this.display=false
      },
      bodyContent(histVer){
        this.title=histVer.title;
        this.contents=histVer.contents;
      }

    },
    filters:{
      vers(val){
        return "版本号："+val;
      }
    },
    created() {
      const id = this.$route.query.id;
      this.getHistoryVer(id);
    }
  }
</script>

<style scoped>
  .main_body{
    margin: 20px 10% 10px;
    border: 1px solid #a5a0a0;
    /*padding: 10px 20px;
    background-color: #e5c596;*/
    border-radius: 10px;
    box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    /*考虑浏览器兼容性*/
    -moz-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
  }
  .title_span{
    margin-left: 150px;
  }
  .title{
    text-align:center;
  }

  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .card-body{
    margin-top: 30px;
    margin-bottom: 5px;
  }
  .box-card{
    margin-left: 20px;
  }
  .right-card{
    margin-right: 20px;
  }
</style>
